<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-13 14:06:39
 * @Description: 
-->
<template>
  <article class="list vertical">
    <div class="list__col-1-2">
      <div class="contact__static" v-if="!showForm">
        <div id="headline" class="textBlockLarge">Let's start a conversation.</div>
        <div class="linebreak"></div>
        <HoverButtons @click="showForm = true" btnText="立即联系" />
        <div class="dbl-linebreak"></div>
        <div class="list__col-1">
          <div class="textBlockLining">
            Address
          </div>
          <div class="half-linebreak"></div>
          <div class=" textBlockLight">
            佛山市禪城區1506創意園A區4號105
          </div>
        </div>
        <div class="linebreak"></div>
        <div class="list__col-1">
          <div class=" textBlockLining">
            Inquiries
          </div>
          <div class="half-linebreak"></div>
          <div class=" textBlockLight">
            +86 13802480502 / 13928292869 （微信同步）
          </div>
        </div>
        <div class="linebreak"></div>
        <div class="list__col-1">
          <div class="textBlockLining">
            E-mail
          </div>
          <div class="half-linebreak"></div>
          <div class=" textBlockLight">
            jcs1506 design@sina.cn
          </div>
        </div>
        <div class="mobile-linebreak"></div>
        <div class="mobile-linebreak"></div>
      </div>
      <Contact-Form v-else @updateShowForm="showForm = false"></Contact-Form>
    </div>
    <div class="list__col-1-2">
      <div id="map-box"></div>
    </div>
  </article>
</template>

<script setup>
let map;
let showForm = ref(false)
onMounted(() => {
  map = new AMap.Map('map-box', {
    zoom: 18,
    rotateEnable: true,
    pitchEnable: true,
    pitch: 50,
    rotation: -15,
    viewMode: '3D', //开启3D视图,默认为关闭
    zooms: [2, 20],
    center: [113.076579, 23.010224]
  });
  var controlBar = new AMap.ControlBar({
    position: {
      right: '10px',
      top: '10px'
    }
  });
  controlBar.addTo(map);

  var toolBar = new AMap.ToolBar({
    position: {
      right: '40px',
      top: '110px'
    }
  });
  toolBar.addTo(map);
  var marker = new AMap.Marker({
    position: map.getCenter(),
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    anchor: 'bottom-center',
    offset: new AMap.Pixel(0, 0)
  });
  marker.setMap(map);
  // 设置鼠标划过点标记显示的文字提示
  marker.setTitle('佛山市禪城區1506創意園A區4號105');

  marker.setLabel({
    direction: 'bottom',
    offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    content: "<div class='info'>佛山市禪城區1506創意園A區4號105</div>", //设置文本标注内容
  });
  map.add(marker)

})
</script>

<style lang="scss" scoped>
:deep(#map-box) {
  width: 100%;
  height: 700px;


  .amap-icon img {
    width: 25px;
    height: 34px;
  }

  .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: 1px solid #00f;
    background-color: #fff;
    white-space: nowrap;
    cursor: default;
    padding: 3px;
    font-size: 12px;
    line-height: 14px;
  }

  .amap-marker-label {
    border: 0;
    background-color: transparent;
  }

  .info {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    position: fixed;
    top: 1rem;
    background-color: white;
    width: auto;
    min-width: 22rem;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(183, 189, 250, 0.5);
  }

  .info {
    position: relative;
    margin: 0;
    top: 0;
    right: 0;
    min-width: 0;
  }

}

@media screen and (max-width: 768px) {
  #map-box {
    height: 300px;
  }

}
</style>
